<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-button
					text="基础使用"
					theme="primary"
					@onClick="handleBasicUse"
					block
				></pure-button>
			</pj-demo>

			<!-- 提示内容 -->
			<pj-demo title="提示内容">
				<pure-button
					text="提示内容"
					theme="success"
					@onClick="handleTips"
					block
				></pure-button>
			</pj-demo>

			<!-- 可关闭 -->
			<pj-demo title="可关闭">
				<pure-button
					text="可关闭"
					theme="warning"
					@onClick="handleCloseable"
					block
				></pure-button>
			</pj-demo>

			<!-- 纵向布局 -->
			<pj-demo title="纵向布局">
				<pure-button
					text="纵向布局"
					theme="danger"
					@onClick="handleVertical"
					block
				></pure-button>
			</pj-demo>

			<!-- 显示遮罩 -->
			<pj-demo title="显示遮罩">
				<pure-button
					text="显示遮罩"
					theme="info"
					@onClick="handleMask"
					block
				></pure-button>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>

		<pure-loading-modal :show="showBasicUse"></pure-loading-modal>
		<pure-loading-modal
			:show="showTips"
			text="加载中"
		></pure-loading-modal>
		<pure-loading-modal
			:show="showCloseable"
			closeable
			text="加载中"
			@onClose="showCloseable = false"
		></pure-loading-modal>
		<pure-loading-modal
			:show="showVertical"
			text="加载中"
			vertical
		></pure-loading-modal>
		<pure-loading-modal
			:show="showMask"
			closeable
			text="加载中"
			mask
			@onClose="showMask = false"
		></pure-loading-modal>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
	import { delay } from "@/uni_modules/pure-utils";

	// **************************************************************************************************************
	// * Refs
	// **************************************************************************************************************
	const showBasicUse = ref(false);
	const showTips = ref(false);
	const showCloseable = ref(false);
	const showVertical = ref(false);
	const showMask = ref(false);

	// **************************************************************************************************************
	// * Computeds
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Watches
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * 生命周期
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Functions
	// **************************************************************************************************************
	// 基础使用
	async function handleBasicUse() {
		showBasicUse.value = true;
		await delay(5000);
		showBasicUse.value = false;
	}

	// 提示内容
	async function handleTips() {
		showTips.value = true;
		await delay(5000);
		showTips.value = false;
	}

	// 可关闭
	async function handleCloseable() {
		showCloseable.value = true;
	}

	// 纵向布局
	async function handleVertical() {
		showVertical.value = true;
		await delay(5000);
		showVertical.value = false;
	}

	// 显示遮罩
	async function handleMask() {
		showMask.value = true;
	}
</script>

<style lang="scss" scoped>
	.page {
	}
</style>
